import clsx from 'clsx';
import React from 'react';

export interface LoadingProps {
  className?: string;
  description?: string;
  fullScreen?: boolean;
}

function LoadingNoMemoized(props: LoadingProps) {
  const { className, description, fullScreen } = props;
  return (
    <div
      className={clsx(
        'flex-col items-center justify-center gap-2',
        fullScreen ? 'flex size-full' : 'inline-flex size-fit',
        className
      )}
    >
      <span className="loading loading-ball loading-lg"></span>
      {description && <span className="text-sm text-gray-500">{description}</span>}
    </div>
  );
}

export const Loading = React.memo(LoadingNoMemoized);
